<template>
  <ContentDetailWrap :title="t('warehouse.edit')">
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
      <BaseButton type="primary" :loading="loading" @click="submit(formRef)">
        {{ t('action.save') }}
      </BaseButton>
    </template>
    <!--    表单-->
    <el-form :model="form" ref="formRef" :rules="rules as FormRules" label-width="110px">
      <div class="flex justify-between">
        <div class="w-50%">
          <el-form-item :label="t('market.markSocialMediaAccount.channel')" prop="channel_id">
            <el-select
              v-model="form.channel_id"
              :filterable="true"
              :placeholder="t('market.markSocialMediaAccount.channelMsg')"
              :clearable="false"
            >
              <el-option
                v-for="item in channelList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="t('market.markSocialMediaAccount.group')" prop="account_group_id">
            <el-select
              v-model="form.account_group_id"
              :filterable="true"
              :placeholder="t('market.markSocialMediaAccount.groupMsg')"
              :clearable="false"
            >
              <el-option
                v-for="item in groupList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="t('market.markSocialMediaAccount.language')" prop="language">
            <el-select
              v-model="form.language"
              :filterable="true"
              :placeholder="t('market.markSocialMediaAccount.languageMsg')"
              :clearable="false"
            >
              <el-option
                v-for="item in languageList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="t('market.markSocialMediaAccount.country')" prop="country">
            <el-select
              v-model="form.country"
              :filterable="true"
              :placeholder="t('market.markSocialMediaAccount.countryMsg')"
              :clearable="false"
            >
              <el-option
                v-for="item in countryList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="t('market.markSocialMediaAccount.account')" prop="account">
            <el-input
              v-model="form.account"
              clearable
              :placeholder="t('market.markSocialMediaAccount.account')"
            />
          </el-form-item>
          <el-form-item :label="t('market.markSocialMediaAccount.password')" prop="pass">
            <el-input
              v-model="form.pass"
              type="password"
              show-password
              clearable
              :placeholder="t('market.markSocialMediaAccount.passwordMsg')"
            />
          </el-form-item>
          <el-form-item :label="t('market.markSocialMediaAccount.windowId')">
            <el-input
              v-model="form.windows_id"
              clearable
              :placeholder="t('market.markSocialMediaAccount.windowIdMsg')"
            />
          </el-form-item>
        </div>
        <div class="w-50%">
          <el-form-item :label="t('market.markSocialMediaAccount.appKey')">
            <el-input
              v-model="form.appkey"
              clearable
              :placeholder="t('market.markSocialMediaAccount.appKeyMsg')"
            />
          </el-form-item>
          <el-form-item :label="t('market.markSocialMediaAccount.secret')">
            <el-input
              v-model="form.secret"
              clearable
              :placeholder="t('market.markSocialMediaAccount.secretMsg')"
            />
          </el-form-item>
          <el-form-item :label="t('system.marketChannel.status')" prop="status">
            <el-select
              v-model="form.status"
              :placeholder="t('system.marketChannel.statusMsg')"
              :clearable="false"
            >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="t('market.markSocialMediaAccount.promptWords')">
            <el-input
              v-model="form.prompt"
              type="textarea"
              :autosize="{ minRows: 6, maxRows: 10 }"
              clearable
              :placeholder="t('market.markSocialMediaAccount.promptWordsMsg')"
            />
          </el-form-item>
        </div>
      </div>
    </el-form>
  </ContentDetailWrap>
</template>
<script setup lang="ts">
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { ElMessage, FormInstance, type FormRules } from 'element-plus'
import { editDataApi, getDetailApi, getEnumApi } from '@/api/market/markSocialMediaAccount'

const { t } = useI18n()
const { push, go } = useRouter()
const { query } = useRoute()

const loading = ref<boolean>(false)

const channelList = ref<Array<Record<string, any>>>([])
const countryList = ref<Array<Record<string, any>>>([])
const languageList = ref<Array<Record<string, any>>>([])
const groupList = ref<Array<Record<string, any>>>([])
const statusList = ref<Array<Record<string, any>>>([
  { label: '启用', value: 1 },
  { label: '禁用', value: 0 }
])

const formRef = ref<FormInstance>()
const form = ref<Record<string, any>>({
  channel_id: '',
  account_group_id: '',
  language: '',
  country: '',
  account: '',
  pass: '',
  windows_id: '',
  appkey: '',
  secret: '',
  status: '',
  prompt: ''
})
const rules = ref<FormRules>({
  channel_id: [
    {
      required: true,
      message: t('market.markSocialMediaAccount.channelMsg'),
      trigger: 'change'
    }
  ],
  language: [
    {
      required: true,
      message: t('market.markSocialMediaAccount.languageMsg'),
      trigger: 'change'
    }
  ],
  country: [
    {
      required: true,
      message: t('market.markSocialMediaAccount.countryMsg'),
      trigger: 'change'
    }
  ],
  account: [
    {
      required: true,
      message: t('market.markSocialMediaAccount.accountMsg'),
      trigger: 'blur'
    }
  ],
  pass: [
    {
      required: true,
      message: t('market.markSocialMediaAccount.passwordMsg'),
      trigger: 'blur'
    }
  ],
  status: [
    {
      required: true,
      message: t('market.markSocialMediaAccount.statusMsg'),
      trigger: 'change'
    }
  ],
  account_group_id: [
    {
      required: true,
      message: t('market.markSocialMediaAccount.groupMsg'),
      trigger: 'change'
    }
  ]
})

const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
      const resp = await editDataApi(parseInt(query.id as string), {
        channel_id: form.value.channel_id,
        language: form.value.language,
        country: form.value.country,
        account: form.value.account,
        pass: form.value.pass,
        windows_id: form.value.windows_id,
        appkey: form.value.appkey,
        secret: form.value.secret,
        status: form.value.status,
        prompt: form.value.prompt,
        account_group_id: form.value.account_group_id
      })
      if (resp.code === 0) {
        ElMessage.success(t('system.parameterConfig.editSucMsg'))
        push({ path: '/market/markSocialMediaAccount/page' })
      }
    }
  })
}

//获取枚举
const getDropDownBoxInfo = async () => {
  const resp = await getEnumApi({ field: 'all' })
  channelList.value = resp.data.channel
  countryList.value = resp.data.country
  languageList.value = resp.data.language
  groupList.value = resp.data.account_group
}

//获取回显数据
const getBackShow = async () => {
  const resp = await getDetailApi(parseInt(query.id as string))
  form.value = resp.data
}

onMounted(() => {
  getDropDownBoxInfo()
  getBackShow()
})
</script>
<style lang="less" scoped></style>
